<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/* 清除浮动 */
			
			.clearfix::after,
			.clearfix::before {
				content: "";
				height: 0;
				line-height: 0;
				visibility: hidden;
				clear: both;
				display: block;
			}
			
			#previewBox {
				min-height: 120px;
				border: 1px solid black;
				border-radius: 4px;
				overflow: hidden;
			}
			
			.previewImg {
				width: 18%;
				padding-bottom: 18%;
				height: 0;
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
				float: left;
				position: relative;
				margin: 10px 1.66% 10px 0;
			}
			
			.previewImg:nth-of-type(5n+1) {
				margin-left: 1.66%;
			}
			
			.previewDel {
				position: absolute;
				right: -10px;
				top: -10px;
				width: 20px;
				height: 20px;
				border: 1px solid #ccc;
				border-radius: 20px;
				background-color: white;
				line-height: 20px;
				text-align: center;
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<input type="file" multiple="multiple" name="" id="previewBtn" value="" />
		<div id="previewBox" class="clearfix">

		</div>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				var $previewBtn = $('#previewBtn'),
					$previewBox = $('#previewBox');
				$previewBtn.on('change', function() {
					var files = this.files,
						i,
						html = '',
						imgCount = $previewBox.children().length;
					if(imgCount > 0 && files.length + imgCount > 9) {
						alert('图片最多上传9张！');
						return false;
					}
					for(i = 0; i < files.length; i++) {
						if(i > 8) {
							break;
						}
						html += '<div class="previewImg" style="background-image:url(' + getObjectURL(files[i]) + ');"><span class="previewDel">×</span></div>';
					}
					$previewBox.append(html);
				});
				$(document).on('click', '.previewDel', function() {
					$(this).parent().remove();
				});
			});

			function getObjectURL(file) {
				var url = null;
				if(window.createObjectURL != undefined) {
					url = window.createObjectURL(file);
				} else if(window.URL != undefined) {
					url = window.URL.createObjectURL(file);
				} else if(window.webkitURL != undefined) {
					url = window.webkitURL.createObjectURL(file);
				}
				return url;
			};
		</script>
	</body>

</html>